<template>
  <ContentBox has-corner class="assurance-house-ratio">
    <ContentBoxTitle title="保障性住房比例" />
    <div class="assurance-house-ratio__content">
      <Pie :list="pieList" :length="20" :length2="8" :canvas-width="400" :canvas-height="220" />
      <div class="gauge-list">
        <div class="gauge-list__content">
          <div class="gauge-list-1">
            <Gauge
              v-for="(item, index) of top3"
              :key="index"
              :text="item.name"
              :value="item.value"
              :canvas-width="80"
              :canvas-height="80"
            />
          </div>
          <div class="gauge-list-1">
            <Gauge
              v-for="(item, index) of last3"
              :key="index"
              :text="item.name"
              :value="item.value"
              :canvas-width="80"
              :canvas-height="80"
            />
          </div>
        </div>
        <div class="gauge-list__title">空置率</div>
      </div>
    </div>
  </ContentBox>
</template>

<script>
import ContentBox from '@/components/ContentBox'
import ContentBoxTitle from '@/components/ContentBoxTitle'
import Pie from '@/components/Pie/Index.vue'
import Gauge from '@/components/Gauge/Index.vue'
export default {
  name: 'AssuranceHouseRatio',
  components: {
    ContentBox,
    ContentBoxTitle,
    Pie,
    Gauge
  },
  props: {
    pieList: {
      type: Array,
      default: () => []
    },
    rotateList: {
      type: Array,
      default: () => []
    },
  },
  computed: {
    top3 () {
      return this.rotateList.slice(0, 2)
    },
    last3 () {
      return this.rotateList.slice(2)
    }
  },
  methods: {
    // formatter(a) {
    //   console.log('a:', a)

    // }
  }
}
</script>

<style lang="scss">
.assurance-house-ratio {
  width: $base * 680px;
  height: $base * 230px;

  .content-box-title__content {
    width: $base * 300px;
  }
  .assurance-house-ratio__content {
    margin-top: $base * -45px;
    display: flex;
  }

  .pie {
    padding-top: 0;
  }

  .gauge-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding-top: $base * 45px;
    margin-left: $base * 40px;

    .gauge {
      // flex: 1;
      flex-basis: 100px;
      flex-shrink: 0;
    }
  }

  .gauge-list {
    display: flex;
  }

  .gauge-list-1 {
    display: flex;
  }

  .gauge-list__title {
    color: $txt_c4;
    font-size: $base * 20px;
    width: $base * 20px;
    padding-top: $base * 45px;
    margin-left: $base * 16px;
  }
}
</style>
